<template>
    <div class="wapper">
        <el-card style="width: 500px">
            <template #header class="header">
                <el-icon class="header" style="size: 20px;">
                    <User />
                </el-icon>
                <span class="header">登录</span>
            </template>

            <el-form :model="formData" label-width="auto" :rules="rules" ref="formRef" style="max-width: 300px">
                <el-form-item label="手机号" prop="tel">
                    <el-input v-model="formData.tel" />
                </el-form-item>
                <el-form-item label="密码" prop="psd">
                    <el-input type="password" v-model="formData.psd" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="formData.email" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onCheckAndSubmit(formRef)">登录</el-button>
                    <el-button @click="resetForm(formRef)">重置</el-button>
                </el-form-item>

            </el-form>
            <template #footer>
                <a href="/user/register">还没有账户?去注册</a>
            </template>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus'
import { userApi } from '@/api'
import { useRouter } from 'vue-router'
import { jwtDecode } from 'jwt-decode'
import { Md5 } from 'ts-md5';
import {  wmsStore  } from '@/store/pinia'

const wms_store = wmsStore()

const router = useRouter()


const formData = reactive({
    tel: "13687578596",
    psd: "By123456",
    email: ""
})

const formRef = ref();

const rules = reactive<any>({
    tel: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '手机号格式不正确', trigger: 'blur' }
    ],
    psd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/, message: '(必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间)', trigger: 'blur' }
    ],
    email: [
        { pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '(Email地址不正确)', trigger: 'blur' }
    ],

})

const onsubmit = () => {
    const md5Pwd = Md5.hashStr(formData.psd).toUpperCase();
    userApi.login({
        tel: formData.tel,
        password: md5Pwd
    }).then((token: any) => {
        let tokenObj:any = jwtDecode(token)
        console.log(tokenObj)
        wms_store.token = token
        wms_store.$id = tokenObj.id
        wms_store.nickName = tokenObj.nickName
        wms_store.roles = tokenObj.roles
        wms_store.Permissions = tokenObj.Permissions
        ElMessage.success('登录成功')
        router.push({ name: "home" })
    })
}

const onCheckAndSubmit = async (formEl: any) => {

    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            onsubmit()
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: any) => {
    formEl.resetFields()
}



</script>

<style scoped>
.wapper {
    background-image: url("/public\xi.jpg");
    background-size: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header {
    color: #66ccff;
    font-weight: 600;

}
</style>